<template>
  <div id="app" class="app-container">
    <Head />
    <div class="main-container">
      <router-view/>
    </div>
  </div>
</template>

<script>
import Head from "@/components/Head.vue";
import productList from "@/views/ProductList.vue";
import MessageBubble from "@/components/MessageBubble.vue";
export default {
  name: "App",
  // 注册头部栏
  components: { Head, productList, MessageBubble },
  // comments: { Head },
  // computed: {
  //   layoutComponent() {
  //     // 根据路由 meta 动态加载布局，默认使用 LayoutDefault
  //     const layout = this.$route.meta?.layout || "LayoutDefault";
  //     return () => import(`@/layouts/${layout}.vue`);
  //   },
  // },
};
</script>

<style lang="less">
.app-container{
  display: flex;
  flex-direction: column;
}
.main-container{
  flex: 1;
  overflow: hidden;
  height: 100%;
}
</style>
